<template>
  <!-- 添加部门 -->
  <el-dialog
    :title="titleText"
    :visible="dialogVisible"
    width="50%"
    @close="onClose"
  >
    <el-form ref="addForm" :rules="addFormRules" :model="form" label-width="100px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select v-model="form.manager" loading-text="正在加载中..." :loading="isLoading" placeholder="请选择" @focus="loadEmployeesList">
          <el-option v-for="item in employeesList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="onSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getEmployeesSimpleList } from '@/api/employees'
import { addDept, getDepartment, updateDepartment } from '@/api/department'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    row: {
      type: Object,
      required: true
    }
  },
  data() {
    const checkDeptNameisRepeat = async(rule, value, callback) => {
      let isRepeat
      if (this.form.id) {
        // 编辑
        const { depts } = await getDepartment()
        const slibings = depts.filter(item => (item.id !== this.row.id && item.pid === this.row.pid))
        isRepeat = slibings.some(item => item.name === value)
      } else {
        // 添加
        isRepeat = this.row.children.some(item => item.name === value)
      }
      return isRepeat ? callback(new Error('部门已存在')) : callback()
    }
    const checkDeptCodeisRepeat = async(rule, value, callback) => {
      let isRepeat
      const res = await getDepartment()
      if (this.form.id) {
        // 编辑
        isRepeat = res.depts.some(item => (item.code !== this.row.code && item.code === value))
      } else {
        // 添加
        isRepeat = res.depts.some(item => item.code === value)
      }
      return isRepeat ? callback(new Error('编码已存在')) : callback()
    }
    return {
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: ''
      },
      employeesList: [],
      isLoading: false,
      addFormRules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '部门名称要求2-50个字符', trigger: 'blur' },
          { validator: checkDeptNameisRepeat, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '部门编码要求2-50个字符', trigger: 'blur' },
          { validator: checkDeptCodeisRepeat, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 2, max: 300, message: '部门介绍要求2-50个字符' }
        ]
      }
    }
  },
  computed: {
    titleText() {
      return (this.form.id ? '编辑' : '添加') + '部门'
    }
  },

  created() {

  },
  methods: {
    onClose() {
      this.$refs.addForm.resetFields()
      this.$emit('update:dialog-visible', false)
      setTimeout(() => {
        this.form = {
          code: '',
          introduce: '',
          manager: '',
          name: ''
        }
      }, 200)
    },
    async loadEmployeesList() {
      this.isLoading = true
      const res = await getEmployeesSimpleList()
      this.employeesList = res
      this.isLoading = false
    },
    async onSave() {
      try {
        if (this.form.id) {
          await updateDepartment(this.form)
        } else {
          await this.$refs.addForm.validate()
          this.form.pid = this.row.id || ''
          await addDept(this.form)
        }
        this.$emit('add-success')
        this.$message.success('操作成功')
        this.onClose()
      } catch (error) {
        console.log(error)
      }
    },
    setForm() {
      this.form = JSON.parse(JSON.stringify(this.row))
    }
  }
}
</script>

<style scoped>

</style>
